<template>
    <div class="container">
        <HeadCopm></HeadCopm>
        <div class="box1">
            <div class="left">
                <el-image class="img" :src="showingImg"
                    :preview-src-list="[showingImg]"></el-image>
            </div>
            <div class="right">
                <ul>
                    <li v-for="(item) in list" :key="item.id" @click="toggle(item.id)" :class="{active: activeIndex === item.id}">
                        {{ item.label }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="box2">
            <div class="right">
                <h2>关于行星（About The Planets）</h2>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。
                    区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。
                </p>
                <el-image class="img" :src="require('../assets/detail3-img-9.png')"
                    :preview-src-list="[require('../assets/detail3-img-9.png')]"></el-image>
            </div>
        </div>
        <div class="box3">
            <div class="left">
                <h2>行星队列</h2>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。
                    区文字区文字区文字区文字区文字区文字区。
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区。
                </p>
            </div>
        </div>
        <div class="box4">
            <div class="left">
                <h2>八大行星</h2>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。
                    区文字区文字区文字区文字区文字区文字区文
                </p>
            </div>
            <div class="right" @click="toDetail">
                <img src="../assets/detail2-img-7.jpg" alt="">
            </div>
        </div>
        <div class="box5">
            <div class="right" @click="toDetail">
                <img src="../assets/detail3-img-10.jpg" alt="">
            </div>
            <div class="left">
                <h2>八大行星</h2>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。
                    区文字区文字区文字区文字区文字区文字区文
                </p>
            </div>
        </div>
        <div class="box6">
            <div class="left">
                <h2>八大行星的分类</h2>
                <p>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区。
                    区文字区文字区文字区文字区文字区文字区文
                </p>
            </div>
            <div class="box">
                <div class="item">
                    <div class="button" @click="handleTo(1)">岩质行星</div>
                    <div class="img">
                        <el-image class="img" :src="require('../assets/detail3-img-11.jpg')"
                            :preview-src-list="[require('../assets/detail3-img-11.jpg')]">
                        </el-image>
                    </div>
                </div>
                <div class="item">
                    <div class="button" @click="handleTo(2)">气态巨行星</div>
                    <div class="img">
                        <el-image class="img" :src="require('../assets/detail3-img-12.jpg')"
                            :preview-src-list="[require('../assets/detail3-img-12.jpg')]">
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HeadCopm from "@/components/HeadComp.vue"
export default {
    name: "Detail3",
    components: {
        HeadCopm
    },
    data() {
        return {
            list: [
                {
                    label: "水星（MERCURY）",
                    id: '1'
                },
                {
                    label: "金星（VENUS）",
                    id: '2'
                },
                {
                    label: "地球（EARTH）",
                    id: '3'
                },
                {
                    label: "火星（MARS）",
                    id: '4'
                },
                {
                    label: "木星（JUPITER）",
                    id: '5'
                },
                {
                    label: "土星（SATURNU）",
                    id: '6'
                },
                {
                    label: "天王星（URANUS）",
                    id: '7'
                },
                {
                    label: "海王星（NEPTUNE）",
                    id: '8'
                }
            ],
            activeIndex: "1"
        }
    },
    methods: {
        toDetail() {

        },
        toggle(index) {
            this.activeIndex = index;
        },
        handleTo(index) {
            const path = {
                1: '/detail4',
                2: '/detail5'
            }
            this.$router.push({
                path: path[index]
            })
        }
    },
    created() {
        
    },
    computed: {
        showingImg() {
            let img = null
            try {
                img = require(`../assets/detail3-img-${this.activeIndex}.jpg`)
            } catch (error) {
                img = require(`../assets/detail3-img-${this.activeIndex}.png`)
            }
            return img;
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    .box1 {
        padding: 62px 15vw;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000000;
        border-top: 1px solid #ccc;

        .left {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            box-shadow: -15px -15px 0px 0px #ccc;

            .img {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            flex: 1;
            color: #ffffff;
            ul > li {
                cursor: pointer;
                margin: 30px 0;
                font-size: 22px;
            }
            .active {
                color: aqua;
            }
        }
    }
    .box2 {
        padding: 100px 15vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        .right {
            padding-left: 50px;
            text-align: left;

            h2 {
                margin-bottom: 20px;
            }

            p {
                padding-left: 50px;
            }
            .img {
                display: block;
                margin: 100px 0 0 50px;
                width: 950px;
                height: 300px;
            }
        }
    }

    .box3 {
        padding: 20px 15vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;

        .left {
            text-align: left;
            padding: 30px 0 0 50px;

            h2 {
                margin-bottom: 20px;
            }

            p {
                padding-left: 50px;
            }
        }

    }

    .box4,
    .box5 {
        padding: 20px 15vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        text-align: left;
        .left {
            padding-left: 50px;
            width: 500px;
            h2 {
                margin: 20px 0;
            }
            p {
                padding-left: 50px;
            }
        }
        .right {
            width: 240px;
            height: 320px;
            margin: 50px 0 0 120px;
            box-shadow: -15px -15px 0px 0px #ccc;
            img {
                width: 240px;
                height: 320px;
            }
        }
        
    }
    .box5 {
        .right {
            width: 240px;
            height: 320px;
            margin: 50px 0 0 120px;
            box-shadow: 15px -15px 0px 0px #ccc;
        }
        
    }
    .box6 {
        padding: 20px 15vw 20px;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        .left {
            padding-left: 50px;
            h2 {
                margin: 20px 0;
            }
            p {
                padding-left: 50px;
            }
        }
        .box {
            padding-left: 100px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            .item {
                width: 330px;
                .button {
                    margin: 90px auto 20px;
                    width: fit-content;
                    padding: 0 10px;
                    height: 35px;
                    line-height: 35px;
                    cursor: pointer;
                    background-color: #000000;
                    color: #ffffff;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>